<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/Addons.js';


const geometry = new THREE.SphereGeometry(10,100,100);
const material = new THREE.MeshLambertMaterial({color:0xf0f0f0});
const sphere = new THREE.Mesh(geometry,material);
sphere.position.set(10,0,0);

const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000);
camera.position.set(20, 20, 20);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();
scene.add(sphere);


const dotLight = new THREE.PointLight(0xff0000, 10000);
dotLight.position.set(20, 20, 20);
scene.add(dotLight);

const ambientLight = new THREE.AmbientLight(0xffffff,1);
scene.add(ambientLight)

const axesHelper = new THREE.AxesHelper(200);
scene.add(axesHelper);

const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
})
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    renderer.render(scene, camera);
    console.log(camera.near, camera.fov, camera.position);
})



</script>